<template>
  <div @touchmove.prevent class="container">
    <div class="video">
      <img
        @click.stop="$router.go(-1)"
        src="@/assets/kll/fanhui.png"
        class="go-back"
        alt=""
      />
      <video-player
        class="video-player vjs-custom-skin"
        ref="videoPlayer"
        :playsinline="true"
        :options="playerOptions"
        @ended="videoFinish()"
      />
      <div
        @click="
          $refs.videoPlayer.player.paused()
            ? $refs.videoPlayer.player.play()
            : $refs.videoPlayer.player.pause()
        "
        class="control-cover"
      ></div>
      <!-- <video
        id="myvideo"
        class="preview-img"
        :src="items.links"
        :alt="items.describe"
        @click="control($event)"
        x5-playsinline="true"
        playsinline="true"
        webkit-playsinline="true"
        preload="auto"
        autoplay="autoplay"
        @ended="videoFinish()"
      ></video> -->
      <div class="btn-bar">
        <!-- <button class="btn avatar">
          <img
            class="avatar"
            @click="skip(items.user_id)"
            :src="items.avatar"
            alt=""
          />
          <img
            v-if="items.is_link === 0"
            @click="attention($event)"
            class="follow-btn"
            src="@/assets/kll/jia.png"
            alt=""
          />
        </button> -->
        <button class="btn">
          <img
            v-if="items.is_like === 1"
            @click="like(items.id, $event)"
            src="@/assets/kll/heart.png"
            alt=""
          />
          <img
            v-else
            @click="like(items.id, $event)"
            src="@/assets/kll/dianzan.png"
            alt=""
          />

          <div>{{ items.like }}</div>
        </button>
        <button @click="showCommentPanel = true" class="btn">
          <img src="@/assets/kll/pinglun.png" alt="" />
          <div>{{ items.evaluate_num }}</div>
        </button>
        <button @click="showShareMask = true" class="btn">
          <img src="@/assets/kll/fenxiang.png" alt="" />
          <div>分享</div>
        </button>
      </div>
      <div v-if="items.commodity_id" class="dynamic-detail">
        <div v-if="!showItem">
          <div @click="showItem = true" class="video-item">
            <img
              style="height:0.48rem;margin-right:0.2rem;"
              src="@/assets/kll/che.png"
              alt=""
            />视频同款<img
              style="height:0.48rem;margin-left:0.2rem;"
              src="@/assets/new-icon/查看全部箭头.png"
              alt=""
            />
          </div>
          <div class="user-name">@{{ items.nickname }}</div>
          <div class="dynamic-content">
            {{ items.describe }}
          </div>
        </div>
        <div
          @click="$router.push('/item-detail/' + items.commodity.id)"
          class="item-panel"
          v-else
        >
          <div class="title">
            <div class="left">视频同款</div>
            <div @click.stop="showItem = false" class="right">×</div>
          </div>
          <div class="item-detail">
            <div class="img">
              <img :src="items.commodity.img_show" alt="" />
            </div>
            <div class="item-name">{{ items.commodity.name }}</div>
            <img src="@/assets/kll/chakan.png" class="watch" alt="" />
          </div>
        </div>
      </div>
    </div>
    <comment-mask
      :CommentInfo="{ id: items.id, num: items.evaluate_num }"
      v-if="showCommentPanel"
      @panelClose="showCommentPanel = false"
    ></comment-mask>
    <div v-if="arrowMask" @click.stop="arrowMask = false" class="arrow-mask">
      <img src="@/assets/商品分享-引导-assets/0.png" alt="" />
    </div>
    <share-mask
      v-if="showShareMask"
      @panelClose="showShareMask = false"
      @qrCode="showQrCode = true"
      @wxShare="wxShare"
    >
    </share-mask>
    <score-mask
      v-if="showMask"
      text="今日观看视频获得"
      :score="watch_video_point"
      @close="showMask = false"
      @finish="getPoint"
    ></score-mask>
  </div>
</template>

<script>
import commentMask from "./component/comment-mask.vue";
import scoreMask from "./component/score-mask";
import { getDetailtData, sendZan, follow, sendMask } from "@/api/dynamics";
import shareMask from "./component/share-mask.vue";
import wx from "weixin-js-sdk";
import { getWXSDK } from "@/api/wx";
import { mapState } from "vuex";
import { getDailyPoint } from "@/api/profile";
export default {
  data() {
    return {
      items: [],
      inputStatus: false,
      showCommentPanel: false,
      maskNum: "",
      content: "",
      showShareMask: false,
      arrowMask: false,
      showQrCode: false,
      goodInfo: {},
      showItem: false,
      showMask: false,
      playerOptions: {}
    };
  },
  computed: {
    ...mapState({
      entryUrl: state => state.app.entryUrl,
      isFullscreen: state => state.app.isFullscreen,
      watch_video_point: state => state.app.integral_rule.watch_video_point
    })
  },
  methods: {
    videoFinish() {
      if (this.items.points !== 1) {
        this.showMask = true;
      }
    },
    getPoint() {
      getDailyPoint({ genre: "video" }).then(res => {
        if (res.status === 200) {
          this.$dialog.toast({
            mes: "领取成功",
            timeout: 1500,
            icon: "success"
          });
          this.items.points = 1;
          this.showMask = false;
        } else {
           this.$dialog.toast({
            mes: res.data.message,
            timeout: 1500
          });
          this.showMask = false;
        }
      });
    },
    commentInput() {
      this.inputStatus = true;
      this.$nextTick(() => {
        document.getElementById("comment").focus();
      });
    },
    like(dynamicsId, $event) {
      sendZan({
        id: dynamicsId
      }).then(res => {
        let state = res.data.data.type;
        let zan = $event.target.nextSibling;
        let zanNum = zan.innerText;
        if (state === 1) {
          zanNum++;
          zan.innerText = zanNum;
          this.items.is_like = 1;
        }
        if (state === 2) {
          zanNum--;
          zan.innerText = zanNum;
          this.items.is_like = 0;
        }
      });
    },
    control(e) {
      let current = e.target;
      if (current.paused) {
        // 如果视频是暂停的
        current.play();
      } else {
        current.pause();
      }
    },
    send() {
      let getContent = this.content;
      sendMask({
        id: this.$route.query.id,
        detail: getContent
      });
      //发送之后清空文本框
      this.content = "";
      //失去焦点隐藏表单
      this.inputStatus = false;
    },
    attention(e) {
      follow({
        user: this.items.user_id
      }).then(res => {
        //关注成功
        if (res.data.data.type === 1) {
          this.items.is_link = true;
        }
        //取消关注成功
        if (res.data.data.type === 2) {
          this.items.is_link = false;
        }
      });
    },
    //跳转到个人中心
    skip(userId) {
      this.$router.push({ path: "/user-page", query: { user_id: userId } });
    },
    wxShare() {
      this.arrowMask = true;
    },
    onShare() {
      let _this = this;
      let title = this.items.describe;
      let desc = this.items.describe;
      let imgUrl = this.items.cover;
      let link =
        window.location.href.split("#")[0] +
        "static/redirect.html?app3Redirect=" +
        encodeURIComponent(
          window.location.href.split("#")[0] +
            "#" +
            window.location.href.split("#")[1].split("?")[0] +
            "?id=" +
            this.$route.query.id
        );
      wx.onMenuShareAppMessage({
        title, // 分享标题
        desc, // 分享描述
        link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
        imgUrl, // 分享图标
        type: "video", // 分享类型,music、video或link，不填默认为link
        dataUrl: this.items.links, // 如果type是music或video，则要提供数据链接，默认为空
        success: res => {
          _this.arrowMask = false;
          this.$dialog.toast({
            mes: "分享成功",
            timeout: 1500,
            icon: "success"
          }); // 用户确认分享后执行的回调函数
          // console.log("分享给朋友成功返回的信息为:", res);
        },
        cancel: function(res) {
          _this.arrowMask = false;
          // 用户取消分享后执行的回调函数
          // console.log("取消分享给朋友返回的信息为:", res);
        }
      });

      //分享到朋友圈
      wx.onMenuShareTimeline({
        title, // 分享标题
        link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
        imgUrl, // 分享图标
        success: function(res) {
          _this.arrowMask = false;
          // 用户确认分享后执行的回调函数
          // console.log("分享到朋友圈成功返回的信息为:", res);
        },
        cancel: function(res) {
          _this.arrowMask = false;
          // 用户取消分享后执行的回调函数
          // console.log("取消分享到朋友圈返回的信息为:", res);
        }
      });
    }
  },
  created() {
    //动态详情
    getDetailtData({
      id: this.$route.query.id
    }).then(res => {
      if (res.status === 200) {
        this.items = res.data.data;
        this.playerOptions = {
          autoplay: true, //如果true,浏览器准备好时开始回放。
          muted: false, // 默认情况下将会消除任何音频。
          loop: false, // 导致视频一结束就重新开始。
          // preload: "auto", // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
          language: "zh-CN",
          // aspectRatio: "16:9", // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
          fluid: false, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
          height: document.documentElement.clientHeight,
          sources: [
            {
              type: "video/ogg",
              type: "video/webm",
              type: "video/mp4",
              src: this.items.links
            }
          ],
          poster: this.items.cover, //你的封面地址
          notSupportedMessage: "此视频暂无法播放，请稍后再试", //允许覆盖Video.js无法播放媒体源时显示的默认信息。
          controls: false
        };
        //解决ios 签名失效问题
        let signLink = /(Android)/i.test(navigator.userAgent)
          ? location.href.split("#")[0]
          : this.entryUrl;
        getWXSDK({ shareurl: signLink }).then(res => {
          if (res.status === 200) {
            // console.log(res.data.data);
            let data = res.data.data;
            wx.config({
              debug: false,
              appId: data.appId, // 和获取Ticke的必须一样------必填，公众号的唯一标识
              timestamp: data.timestamp, // 必填，生成签名的时间戳
              nonceStr: data.nonceStr, // 必填，生成签名的随机串
              signature: data.signature, // 必填，签名，见附录1
              jsApiList: ["onMenuShareAppMessage", "onMenuShareTimeline"]
            });
            //处理验证失败的信息
            wx.error(function(res) {
              // console.log("验证失败返回的信息:", res);
            });
            //处理验证成功的信息
            wx.ready(() => {
              // console.log("验证完成");
              this.onShare();
            });
          }
        });
      }
    });
  },
  components: {
    commentMask,
    shareMask,
    scoreMask
  }
};
</script>
<style lang="less">
.vjs-big-play-button{
  visibility: hidden;
}
</style>
<style lang="less" scoped>
.container {
  /*background: #000;*/
  .video {
    width: 100%;
    height: 100%;
    position: relative;
    // align-items: center;
    background: #000;
    .go-back {
      position: absolute;
      top: 0.4rem;
      left: 0.4rem;
      z-index: 9;
    }
    .control {
      display: none;
      position: absolute;
      left: 50%;
      top: 50%;
      width: 2rem;
      height: 2rem;
      margin: -1rem 0 0 -1rem;
      border-radius: 50%;
      overflow: hidden;
    }
    .control-cover {
      position: absolute;
      width: 100%;
      height: 100%;
      z-index: 2;
      top: 0;
      left: 0;
    }
    .preview-img {
      background-color: #000000;
      width: 100%;
      height: 100%;
    }
    .btn-bar {
      position: absolute;
      right: 0.4rem;
      bottom: 2rem;
      font-size: 0.52rem;
      line-height: 1.8rem;
      z-index: 3;
      .btn {
        display: block;
        color: #fff;
        border: none;
        background: none;
        font-size: 0.48rem;
        padding: 0;
        margin: 0.6rem auto 0;
        img {
          height: 1rem;
          margin-bottom: 0.15rem;
        }
      }
      .avatar {
        width: 1.6rem;
        height: 1.6rem;
        margin: 0 auto 1.2rem;
        position: relative;
        img {
          width: 100%;
          height: 100%;
          border-radius: 50%;
        }
        .follow-btn {
          position: absolute;
          width: 0.88rem;
          height: 0.8rem;
          bottom: -0.6rem;
          left: calc(50% - 0.44rem);
        }
      }
    }
    .dynamic-detail {
      position: absolute;
      left: 0.4rem;
      bottom: 1rem;
      color: #fff;
      font-size: 0.52rem;
      z-index: 3;
      .video-item {
        background: rgba(5, 5, 5, 0.661);
        width: 4rem;
        border-radius: 0.12rem;
        padding: 0.1rem 0.25rem;
        display: flex;
        align-items: center;
      }
      .user-name {
        font-size: 0.64rem;
        margin: 0.25rem 0 0.4rem;
      }
      .item-panel {
        background: #fff;
        border-radius: 0.12rem;
        padding: 0.4rem;
        width: 8rem;
        .title {
          font-size: 0.54rem;
          color: #999;
          display: flex;
          justify-content: space-between;
          padding-bottom: 0.3rem;
          .right {
            font-size: 0.64rem;
            width: 2rem;
            text-align: right;
          }
        }
        .item-detail {
          display: flex;
          position: relative;
          .img {
            height: 2rem;
            width: 2rem;
            border-radius: 0.12rem;
            background: #dfdfdf;
            margin-right: 0.1rem;
            img {
              width: 100%;
              height: 100%;
              object-fit: cover;
            }
          }
          .item-name {
            width: calc(100% - 2.1rem);
            font-size: 0.55rem;
            color: #333;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            overflow: hidden;
            -webkit-line-clamp: 2;
            line-height: 0.75rem;
            height: 1.5rem;
          }
          .watch {
            position: absolute;
            right: 0;
            bottom: 0;
          }
        }
      }
    }
    .bottom-panel {
      position: fixed;
      width: 100%;
      bottom: 0;
      left: 0;
      color: #fff;

      .user-info {
        display: flex;
        padding: 0 4%;
        line-height: 1.5rem;

        img {
          width: 1.5rem;
          height: 1.5rem;
          border-radius: 50%;
        }

        .username {
          font-size: 0.52rem;
          margin-left: 0.4rem;
        }

        .follow-btn {
          margin: 0.25rem 0 0 0.5rem;
          border: none;
          background: rgba(0, 120, 255, 1);
          color: #fff;
          height: 1rem;
          line-height: 1rem;
          font-size: 0.48rem;
          padding: 0 0.4rem;
          border-radius: 0.5rem;

          img {
            height: 0.4rem;
            width: 0.4rem;
            vertical-align: middle;
            margin: 0;
          }
        }
      }

      .content {
        font-size: 0.52rem;
        width: 75%;
        margin: 0.4rem 0 0.6rem 4%;
      }

      .progress-bar {
        height: 1px;
        width: 100%;
        background-color: #fff;
      }
    }

    .input-layer {
      .mask {
        position: fixed;
        left: 0;
        top: 0;
        height: 100%;
        width: 100%;
      }

      .input-bar {
        position: fixed;
        left: 0;
        bottom: 0;
        z-index: 999;
        width: 100%;
        background: #fff;
        display: flex;
        justify-content: space-between;
        height: 2rem;
        padding: 0.3rem 3.2%;

        input {
          border: none;
          font-size: 0.52rem;
          background-color: #f1f1f1;
          width: calc(100% - 2rem);
          padding-left: 0.5rem;
        }

        .send-btn {
          border: none;
          background: none;
          font-size: 0.52rem;
          color: #444444;
          width: 2rem;
          text-align: center;
          padding: 0;
        }
      }
    }
  }
  .arrow-mask {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    text-align: right;
    z-index: 99999;
    img {
      margin-right: 9%;
    }
  }
}
</style>
